import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

/* Thinking In React */
/* React哲学 */
/* 构建一个简单的React可搜索的产品数据表格 */

// FilterableProductTable (橙色): 是整个示例应用的整体
class FilterableProductTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 设为state的值有用户输入的搜索词, 复选框是否选中的值
            filterText: '',
            inStockOnly: false
        };
        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
        this.handleinStockOnlyChange = this.handleinStockOnlyChange.bind(this);
    }
    handleFilterTextChange(filterText) {
        this.setState({ filterText: filterText });
    }
    handleinStockOnlyChange(inStockOnly) {
        this.setState({ inStockOnly: inStockOnly });
    }
    render() {
        return (
            <div>
                <SearchBar
                    filterText={this.state.filterText} inStockOnly={this.state.inStockOnly}
                    onHandleFilterTextChange={this.handleFilterTextChange} onHandleInStockOnlyChange={this.handleinStockOnlyChange}
                />
                <ProductTable products={this.props.products} filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} />
            </div>
        );
    }
}

// SearchBar (蓝色): 接受所有的用户输入
class SearchBar extends React.Component {
    constructor(props) {
        super(props);
        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
        this.handleinStocklyChange = this.handleinStocklyChange.bind(this);
    }
    handleFilterTextChange(event) {
        this.props.onHandleFilterTextChange(event.target.value);
    }
    handleinStocklyChange(event) {
        this.props.onHandleInStockOnlyChange(event.target.checked);
    }
    render() {
        const filterText = this.props.filterText;
        const inStockOnly = this.props.inStockOnly;
        return (
            <form>
                <input
                    type="text" placeholder="Search.."
                    value={filterText} onChange={this.handleFilterTextChange} />
                <p> {/* 加入p标签实现分行 */}
                    <input
                        type="checkbox" checked={inStockOnly}
                        onChange={this.handleinStocklyChange}
                    />
                    Only show products in stock
                </p>
            </form>
        );
    }
}

// ProductTable (绿色): 展示数据内容并根据用户输入筛选结果
class ProductTable extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const rows = []; // 记录存放的表格
        let lastCategory = null; // 因为JSON中的数据是分类顺序排列的, 所以只需记录当前循环到的商品Category是否和上一个相同

        const filterText = this.props.filterText;
        const inStockOnly = this.props.inStockOnly;

        this.props.products.forEach((product) => {
            // 根据输入的信息决定要不要推入商品
            if (product.name.indexOf(filterText) === -1) return; // 检索字符串值没有出现则返回-1
            // 根据复选框是否选中, 以及商品是否stocked, 决定要不要推入商品
            if (inStockOnly && product.stocked) return;

            // 推入种类
            if (product.category !== lastCategory) {
                // 如果与上一个种类不同, 则要显示新的种类, 因为是列表, 要设置key
                rows.push(<ProductCategoryRow category={product.category} key={product.category} />)
            }
            // 推入商品信息
            rows.push(<ProductRow product={product} key={product.name} />)
            // 记录上一个商品种类
            lastCategory = product.category;
        })

        return (
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        );
    }
}

// ProductCategoryRow (天蓝色): 为每一个产品类别展示标题
class ProductCategoryRow extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const category = this.props.category;
        return (
            <tr>
                {/* colSpan - 合并单元格 */}
                <th colSpan={2}>
                    {category}
                </th>
            </tr>
        );
    }
}

// ProductRow (红色): 每一行展示一个产品
class ProductRow extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const product = this.props.product;
        // stock为false的标红, JSX内联样式{{}}
        const name = product.stocked ? product.name : <span style={{ color: 'red' }}>{product.name}</span>
        return (
            <tr>
                <td>{name}</td>
                <td>{product.price}</td>
            </tr>
        );
    }
}

const PRODUCTS = [
    { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
    { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
    { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" },
    { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
    { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
    { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
];

ReactDOM.render(
    <FilterableProductTable products={PRODUCTS} />,
    document.getElementById('root')
);